<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      #app {
        border: 2px solid #f00;
        height: 200px;
      }
    </style>
  </head>

  <body>
    <h1>计算属性的实现方法</h1>

    <div id="app">
      fullName: {{fullName}}
      <br />
    </div>
    <!-- 自己手撸vue2源码 -->
    <script src="dist/vue.js"></script>
    <!-- 使用vue2 官方封装好的源码 -->
    <!-- <script src="./VUE2-master/vue .js"></script> -->
    <script>
      const vm = new Vue({
        el: "#app",
        data() {
          return {
            firstName: "张",
            lastName: "沐阳",
          };
        },
        computed: {
          // 具有缓存机制，数据改变才会重新执行这个方法
          // 使用方式:
          // 属性： 函数
          // 属性： 对象
          fullName() {
            console.log("计算属性-fullName执行---computed");
            return this.firstName + this.lastName;
          },
          // fullSexAgeObj: {
          //   get() {
          //     console.log('计算属性-fullSexAgeObj执行---computed')
          //     return this.age + this.sex

          //   },
          //   set(val) {
          //     console.log('计算属性-fullSexAgeObj执行--computed', val)
          //     this.age = val.split(' ')[0]
          //     this.sex = val.split(' ')[1]
          //   }
          // }
        },
      });

      // 1.0 实例可以直接获取计算属性的实现方法是  通过Object.defineProperty代理到vm实例上
      vm.fullName; //调用一次 会触发get函数 那么就去执行对应的 计算属性value值函数
      //2.0 会有缓存机制，计算属性-fullName执行，只会打印一次：通过一个变量 dirty 如果为真就执行计算属性中的方法，如果为false就不执行来实现
      vm.fullName; //调用二次
      vm.fullName; //调用三次 因为有了缓存机制实际上只执行了一次 这个计算属性的 值（函数）

      // 面试题
      // watch 和 computed
      // computed 具有缓存机制  通过一个变量dirty
      // watch 不会有缓存机制 watch的值 通过作为Watcher的一个参数（回调函数）来实现

      //现在实现 数据更新自动实现页面更新功能
      setTimeout(() => {
        vm.lastName = "阿菊沐阳思佳海霞旭阳永全";
      }, 1000);
    </script>
  </body>
</html>
